<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {# 引入js #}
    <script src="{% static 'js/jquery-3.7.1.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'plugins/bootstrap.min.js' %}" type="text/javascript"></script>
    {# 引入css #}
    <link rel="stylesheet" href="{% static 'css/Clarknb.css' %}">

</head>
<body>
<fieldset>
    <legend>n1-字符串</legend>
    <div class="btn-container">n1的值为:{{ n1 }}</div>
    <div>
        {% if n1 == "刘鹏" %}
            <h1>Levy-牛逼</h1>
        {% elif n1 == "孙丁丁" %}
            <h1>Lighting-牛逼</h1>
        {% else %}
            <h1>Ryan-牛逼</h1>
        {% endif %}
    </div>
</fieldset>

<fieldset>
    <legend>n2-列表</legend>
    <div class="btn-container">n2的值为:{{ n2 }}</div>
    <!-- 调用列表 -->
    <div>第1个元素为：{{ n2.0 }}，第三个元素为：{{ n2.2 }}</div>
    <div>列表的循环：
        {% for item in n2 %}
            <span>{{ item }}</span>
        {% endfor %}
    </div>
</fieldset>

<fieldset>
    <legend>n3-字典</legend>
    <div class="btn-container">n3的值为:{{ n3 }}</div>
    <!-- 调用字典 -->
    <div>刘鹏的值为：{{ n3.刘鹏 }}，孙丁丁的值为：{{ n3.孙丁丁 }}</div>
    <div>字典的循环：
        {% for k,v in n3.items %}
            <li>{{ k }}={{ v }}</li>
        {% endfor %}

        {% for item in n3.items %}
            <li>{{ item.0 }}=>{{ item.1 }}</li>
        {% endfor %}
    </div>
</fieldset>

<fieldset>
    <legend>n4-对象数组</legend>
    <div class="btn-container">n4的值为:{{ n4 }}</div>
    <div>对象数组的循环：
        {% for item in n4 %}
            {% for k,v in item.items %}
                <li>{{ k }}={{ v }}</li>
            {% endfor %}
        {% endfor %}
        <hr>
        {% for item in n4 %}
            <li>{{ item.刘鹏 }}=>{{ item.孙丁丁 }}</li>
        {% endfor %}
    </div>
</fieldset>

<img src="{% static 'img/111_python.png' %}" alt="" style="width: 30%">
</body>
</html>